<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
	<head th:include="header::header"></head>
	<title>普惠商城-个人中心-账户设置-我的银行卡</title>
</head>
<body>
	
	<!-- 顶部导航条开始 -->
	<div  th:include="personal/personalhead::order-personalhead-nav"></div>
	<!-- 顶部导航条结束 -->
	<!-- 顶部搜索栏部分开始 -->
	<div  th:include="personal/personalsearch::order-personalsearch-nav"></div>
	<!--个人中心中间主体框架  -->
	<div class="centerbody personal_middle">
		<!-- 左侧通用导航栏 -->
		<div class="personal_middle_nav" th:include="commonfragment::order-left-menu-nav"></div>
		<div class="centerbody personal_middle_main">
			<div class="personal_middle_main_tit">
				<span>帐户设置</span>><span>我的银行卡</span>
			</div>
			<!-- 订单tab标签 -->
			<div data-role="page">
        		<div data-role = "content-floud">
					<div class="publicBox">
						<div class="realName pad_20">
							<p class="realNameForm formBg">
								<label>帐户名称：</label>
								<input type="text" th:value="${cerAuth.certificatesName}" placeholder="" readonly="readonly" id="certificates_name">
							</p>
							<p class="realNameForm">
								<label>银行卡号：</label>
								<span th:if = ${bankInfo}>
									<input type="text" th:value="${bankInfo.cardNum}" placeholder="请输入您的银行卡号" id = "bank_card_num">
								</span>
								<span th:unless = "${bankInfo}">
									<input type="text" value="" placeholder="请输入您的银行卡号" id = "bank_card_num">
								</span>
							</p>
							<p class="realNameForm formBg">
								<label>所属银行：</label>
								<span th:if = ${bankInfo}>
									<input type="text" th:value="${bankInfo.bankName}" placeholder="" readonly="readonly" id = "bank_card_name">
								</span>
								<span th:unless = "${bankInfo}">
									<input type="text" value="根据卡号自动获取" placeholder="" readonly="readonly" id = "bank_card_name">
								</span>
							</p>
							<p class="realNameBut">
								<button name="" id = "bindbanksub">
									<span th:if = ${bankInfo}>
										修改
									</span>
									<span th:unless = "${bankInfo}">
										绑定
									</span>
								</button>
							</p>
						</div><!--LineConf-->
					</div><!--个人信息-->
				</div>
   			 </div>
			<!-- 全部订单 -->
			
		</div>
		<div style="clear:both;"></div>
	</div>
	
	<!-- 页面底部 -->
	<div th:include="footer::footer"></div>

</body>
<script th:inline="javascript">
$(function(){
	//为银行卡号绑定文本时间
	$('#bank_card_num').keypress(function(){
		bindBankCardSub();
	})
	$('#bank_card_num').blur(function(){
		bindBankCardSub();
	})
	/*tab标签切换*/

	//获取短信验证码
	var validCode=true;
	$(".realNameCode").click (function  () {
		var time=30;
		var code=$(this);
		if (validCode) {
			validCode=false;
			code.addClass("msgs1");
		var t=setInterval(function  () {
			time--;
			code.html(time+"秒");
			if (time==0) {
				clearInterval(t);
			code.html("重新获取");
				validCode=true;
			code.removeClass("msgs1");

			}
		},1000)
		}
	})


    function tabs(tabTit,on,tabCon){
        $(tabCon).each(function(){
            $(this).children().eq(0).show();
        });
        $(tabTit).each(function(){
            $(this).children().eq(0).addClass(on);
        });
        $(tabTit).children().click(function(){
            $(this).addClass(on).siblings().removeClass(on);
            var index = $(tabTit).children().index(this);
            $(tabCon).children().eq(index).show().siblings().hide();
        });
    }
    tabs(".LineTitle","Line_on",".LineCon");
	$(".box1 input:checked").parent().parent().addClass("selected");
	$(".box1 input").change(function(){
        $(".box1 input:checked").parent().parent().addClass("selected").siblings().removeClass("selected");
    });
   		$('input.paybutton').eq(0).addClass('choose');
   		
   		$('input.paybutton').hover(function(){
   			$(this).addClass('choose');
   			$(this).siblings().removeClass('choose');
   		},function(){
   			$(this).removeClass('choose');
   		})
    	$('.cancel_small').click(function(){
			$('.shadow').css('display','none');
			$('.login_box_2').css('display','none');
		})
		
		$('.add_info').click(function(){
			$('.shadow').css('display','block');
			$('.login_box_2').css('display','block');
		})
		$('.shadow').css('height',$(window).height());
			$('.login_box_2').css('top',($(window).height()-$('.login_box_2').height())/2);
			$('.login_box_2').css('left',($(window).width()-$('.login_box_2').width())/2);
		$(window).resize(function(){
			$('.shadow').css('height',$(window).height());
			$('.login_box_2').css('top',($(window).height()-$('.login_box_2').height())/2);
			$('.login_box_2').css('left',($(window).width()-$('.login_box_2').width())/2);
		})
		 $("#hear li").click(function(){
    $(this).css({
         borderBottom: "2px solid red",
         height:"43px"
    }).siblings().css({
        borderBottom: "none",
        height:"45px"
    });
});                
                         
$("#hear li").click(function(){
        $(this).addClass("action").siblings().removeClass("action");
        var index = $(this).index();
        $("#contentop li").eq(index).css("display","block").siblings().css("display","none");
        });
})
//绑定会员卡
$("#bindbanksub").click(function(){
	var cardNum = $('#bank_card_num').val();
	if(isNotNull('bank_card_num') && isNotNull("bank_card_name")){
		$.ajax({
			url:"/bankcard/bindBanCard",
			type:"post",
			dataType:"json",
			data:{"cardNum":$('#bank_card_num').val(),"ownName":$('#certificates_name').val(),"bankName":$("#bank_card_name").val()},
			error:function(){},
			success:function(data){
				if(data.code == "200"){
					layer.msg("绑定成功");
					$('#bindbanksub').html("修改");
				}else{
					layer.msg(data.message);
				}
			}
		});
	}
})
//非空验证
function isNotNull(id){
	var val = $('#'+id).val();
	if(val.trim().length < 1){
		tipsIndex = layer.tips("此处不能为空","#"+id,{tips: 2});
		return false;
	}
	return true;
};
//绑定银行卡操作
function bindBankCardSub(){
	var val = $('#bank_card_num').val();
	if(val == ""){
		$('#bank_card_name').val("");
	}
	if(val.trim().length >= 8){
		$.ajax({
			url:"/bankcard/getBanCardName",
			type:"post",
			dataType:"json",
			data:{"bankCardNum":val},
			error:function(){},
			success:function(data){
				if(data.code == "200"){
					$('#bank_card_name').val(data.cardName);
				}else{
					$('#bank_card_name').val("");
				}
			}
		});
	}
}
</script>

</html>